<template>
  <el-dialog
    :visible.sync="show"
    width="500px"
    :append-to-body="true"
    :show-close="false"
    :close-on-click-modal="false"
    class="exc_record"
  >
    <div slot="title" class="title_close">
      <!-- 货币兑换记录 -->
      <div class="title">{{$t('account_dialog.exchange_record.56hu3ybhtys0')}}</div>
      <img
        src="@/assets/img/icon_gb1.png"
        class="close"
        @click="hideDayMonth"
      />
    </div>
    <div class="record_list">
      <div class="option">
        <el-date-picker
          v-model="recordDate"
          type="daterange"
          @change="handechange"
          :picker-options="pickerOptions"
          :unlink-panels="true"
          value-format="yyyy-MM-dd"
          range-separator="-"
          :start-placeholder="$t('account_dialog.exchange_record.56hu3ybhv0w0')"
          :end-placeholder="$t('account_dialog.exchange_record.56hu3ybhvbk0')"
        >
        </el-date-picker>
        <el-select
          v-model="recordform.status"
          @change="changeType"
        >
          <el-option
            v-for="(item, index) in statusList"
            :key="index"
            :label="item.name"
            :value="item.status"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div
      class="record_total"
      v-infinite-scroll="load"
      infinite-scroll-disabled="loading"
      infinite-scroll-delay="200"
      infinite-scroll-distance="20"
    >
      <div class="record_item" v-for="(item, i) in recordList" :key="i">
        <div class="record">
          <div class="data">
            <span>{{ item.from | exchangeType(te) }}</span>
            {{ $t('account_dialog.exchange_record.56hu3ybhvkc0') }}
            <span>{{ item.to | exchangeType(te) }}</span>
          </div>
          <div class="status" :class="item.status == 3 ? 'statusRed' : item.status == 2 ? 'statusBlue' : ''">{{ item.status | exchangeStatus(te) }}</div>
        </div>
        <!-- 支出 -->
        <div class="date_item">
          <div class="data">
            <span>{{ $t('account_dialog.exchange_record.56hu3ybhvtw0') }}</span>
            <span>
              <i>{{Number(item.fromAmount).toFixed(2) | formatNumberRgx}}</i>
              {{ item.from }}
            </span>
          </div>
          <!-- 兑入 -->
          <div class="data">
            <span>{{ $t('account_dialog.exchange_record.56hu3ybhw3g0') }}</span>
            <span v-if="item.status == 2">
              <!-- 当前状态不为2：兑换成功时，显示'--' -->
              <i>{{Number(item.toAmount) | formatNumberRgx}}</i>
              {{ item.to }}
            </span>
            <span v-else>--</span>
          </div>
          <div class="data">
            <span>{{ $t('account_dialog.exchange_record.56hu3ybhwc00') }}</span>
            <!-- 当前状态不为2：兑换成功时，显示'--' -->
            <span v-if="item.status == 2">{{ item.fee }} {{ item.to }}</span>
            <span v-else>--</span>
          </div>
          <!-- 兑换汇率 -->
          <!-- <div class="data">
            <span>{{ $t('account_dialog.exchange_record.56hu3ybhwl80') }}</span>
            <span>{{ item.rate }} {{ item.from }} = 1 {{ item.to }}</span>
          </div> -->
          <div class="data">
            <span>{{ $t('account_dialog.exchange_record.56hu3ybhwxc0') }}</span>
            <span>{{ item.createTime | date2 }}</span>
          </div>
        </div>
      </div>
      <p class="more" v-if="loading && !finished">{{ $t("m.Loading") }}</p>
      <p v-if="finished" class="more">{{ $t("m.No_more") }}</p>
    </div>
  </el-dialog>
</template>

<script>
import {get_exchange_record} from '@/assets/js/API/order.js';
import dayjs from "dayjs";
export default {
  props: {
    show: Boolean,
  },
  filters: {
    date2(val) {
      return dayjs(val * 1000).format("YYYY/MM/DD  HH:mm:ss");
    },
  },
  data() {
    return {
      lang: "",
      recordList: [], // 兑换记录列表
      statusList: [
        {
          name: this.$t('account_dialog.exchange_record.56hu3ybhx6o0'),
          status: 1,
        },
        {
          name: this.$t('account_dialog.exchange_record.56hu3ybhxfk0'),
          status: 2,
        },
        {
          name: this.$t('account_dialog.exchange_record.56hu3ybhxog0'),
          status: 3,
        },
        {
          name: this.$t('account_dialog.exchange_record.56hu3ybhxzg0'),
          status: "",
        },
      ], // 状态列表
      recordform: {
        startDate: null, // 开始时间
        endDate: null, // 结束时间
        status: null, // 状态1：兑换中，2：兑换成功，3：兑换失败
        page: 1, // 兑换页数
        pageSize: 10, // 兑换条数
      }, // 兑换表单
      recordDate: null,
      loading: true, // 加载态
      finished: false, // 完成态
      pickerOptions: {
        disabledDate(time) {
          const end = new Date();
          return time.getTime() >= end;
        }, // 时间选择器范围为最多为本日
      },
    };
  },
  created() {},
  mounted() {
    this.initTime();
  },
  methods: {
    // 初始化时间，默认三个月
    initTime() {
      let time = new Date();
      this.recordform.startDate = dayjs(
        time.getTime() - 3600 * 1000 * 24 * 90
      ).format("YYYY-MM-DD");
      this.recordform.endDate = dayjs(time.getTime()).format("YYYY-MM-DD");
      this.recordDate = [this.recordform.startDate, this.recordform.endDate];
      this.recordform.status = "";
    },
    hideDayMonth() {
      this.init();
      this.$emit("closeRecord");
      this.recordform = {
        startDate: null, // 开始时间
        endDate: null, // 结束时间
        status: "", // 状态1：兑换中，2：兑换成功，3：兑换失败
        page: 1, // 兑换页数
        pageSize: 10, // 兑换条数
      };
      this.initTime();
    },
    // 获取货币兑换记录列表
    async getRecordList(obj) {
      if (!this.finished) {
        const res = await get_exchange_record(obj);
        if (res.code != 1) return this.$message.error(res.msg);
        if (res.data.list.length > 0) {
          this.recordList = [...this.recordList, ...res.data.list];
        } else {
          this.finished = true;
        }
        this.loading = false;
      }
    },
    // 改变日期
    handechange(val) {
      if (val == null) return;
      this.recordList = [];
      this.recordform.page = 1;
      this.recordform.startDate = val[0];
      this.recordform.endDate = val[1];
      this.loading = true;
      this.finished = false;
      this.getRecordList(this.recordform);
    },
    // 改变状态
    changeType(val) {
      this.recordList = [];
      this.recordform.page = 1;
      this.loading = true;
      this.finished = false;
      this.recordform.status = val;
      this.getRecordList(this.recordform);
    },
    init() {
      this.recordList = [];
      this.recordform = {
        startDate: null, // 开始时间
        endDate: null, // 结束时间
        status: null, // 状态1：兑换中，2：兑换成功，3：兑换失败
        page: 1, // 兑换页数
        pageSize: 10, // 兑换条数
      };
      this.loading = true;
      this.finished = false;
    },
    // 无限滚动加载
    load() {
      this.loading = true;
      this.getRecordList(this.recordform);
      this.recordform.page++;
    },
  },
};
</script>
<style lang="less">
.exc_record{
  i{ font-style:normal}
}
.record_list {
  .option {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-right: 16px;
    .el-select {
      width: 130px;
      .el-input__inner {
        height: 30px;
        background-color: @LightBorderLine;
        border: none;
        color: @fff;
        font-size: 12px;
      }
      .el-input__suffix {
        .el-input__icon {
          line-height: 20px;
        }
      }
    }
    .el-date-editor {
      margin-right: 10px;
      width: 300px;
      height: 30px;
      background-color: @LightBorderLine;
      border: 1px solid transparent;
      .el-range-input {
        background-color: transparent;
        color: @fff;
        font-size: 12px;
      }
      .el-range-separator {
        color: @fff;
        font-size: 12px;
        line-height: 22px;
      }
      .el-input__icon {
        line-height: 20px;
        // margin-bottom: 3px;
      }
    }
  }
}
.record_total {
  height: 450px;
  overflow: auto;
  margin-top: 16px;
  .record_item {
    padding-bottom: 16px;
    margin-right: 16px;
    border-bottom: 1px solid @LightBorderLine;
    .record {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      line-height: 30px;
      color: @fff;
      border-bottom: 1px solid @LightBorderLine;
      .status {
        color: @fbSix;
      }
      .statusRed {
        color: @red;
      }
      .statusBlue {
        color: @hoverColor;
      }
    }
    .date_item {
      padding-top: 8px;
      font-size: 12px;
      color: @fbSix;
      .data {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
.el-dialog .el-dialog__body {
  padding: 0 30px 30px 30px;
}
.el-date-table td.in-range div {
  background-color: @bgColor;
}
.el-date-table td.in-range div:hover {
  background-color: @deepBg;
}
.el-date-range-picker__content {
  color: @fff;
}
.el-picker-panel__icon-btn {
  color: @fff;
}
</style>